<template>
    <a-modal
        :bodyStyle="{maxHeight: maxHeight+'px', overflow: 'auto' }"
        :destroyOnClose="true"
        :title="title"
        :width="width"
        :visible="visible"
        :confirmLoading="confirmLoading"
        :maskClosable="true"
        @ok="ok"
        @cancel="cancel"
        cancelText="关闭"
        :ok-button-props="{ props: { shape:'round'} }"
        :cancel-button-props="{ props: { shape:'round'} }"
       
        >
        <a-spin :spinning="confirmLoading">
            <LForm ref="LForm" @clickEventHandler="clickEventHandler"  @changeEventHandler="changeEventHandler" :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol" :wrapperCol="wrapperCol"></LForm>
        
            <LAceEditor ref="LAceEditor" @change="onChange" :content="echoDrRule" height="400px" theme="tomorrow_night_bright" lang="json"></LAceEditor>   
        </a-spin>

       <drEmpSelect ref="drEmpSelect" @onSelect="onSelect"></drEmpSelect>
    </a-modal>
    
</template>

<script>
import pick from 'lodash.pick'
import request from '@/utils/request'
import moment from 'moment'
import LForm from '@/components/lt/form/LForm'
import drEmpSelect from './drEmpSelect'
import {SysMixin} from '@/mixins/SysMixin'
import LAceEditor from '@/components/lt/LAceEditor'
export default {
    name:'drEmpRuleForm',
    components:{LForm,drEmpSelect,LAceEditor},
    mixins:[SysMixin],
     props:{
        mostColumns:{
            type:Number,
            default:1
        },
        labelCol:{
            type:Object,
            default:function(){
                return {sm: { span: 4 }}
            }
        },
        wrapperCol:{
            type:Object,
            default:function(){
                return {sm: { span: 20 }}
            }
        },
      
    },
    data(){
        return{
            moment,
            title:'新增人员数据权限规则',
            visible:false,
            confirmLoading: false,
            model:{},
            echoDrRule:'',
            maxHeight:900,
            width:800,
            formAttributes:{
              type:'',//collapse,tabs
              formItems:[
                {
                  title:'标签一',
                  columns:1,
                  fields:[
                    
                    {field:'empName',label:'人员姓名',component:'inputSearch',rules: [{ required: true, message: '人员姓名不能为空!' }],disabled:false,},
                    {field:'accountNo',label:'人员账号',component:'input',rules: [{ required: true, message: '人员账号不能为空!' }],disabled:true,},
                    // {field:'drRule',label:'规则',component:'textarea',rules: [{ required: true, message: '请录入规则!' }],rows:20},
                  ]
                },
              ]

            }
            
        }
    },
    methods:{
        onChange(content){
            this.echoDrRule=content
        },
        edit (record) {
            this.visible = true;
            this.model = Object.assign({}, record)
            if(this.model.echoDrRule){
                this.echoDrRule = this.model.echoDrRule
            }
            this.$nextTick(() => {
                this.getForm().setFieldsValue(pick(this.model,'empName','accountNo'))
            })
        },
        
        ok(){
            const that = this;
            this.getForm().validateFields((err, values) => {
                if (!err) {
                    that.confirmLoading = true
                    this.model['echoDrRule'] = this.echoDrRule
                    // this.model['drRule'] = this.echoDrRule.replace(/\n/g,'').replace(/\t/g,'').replace(/\r/g,'').replace(/\s/g,'')
                    this.model['drRule'] = this.echoDrRule.replace(/\n/g,'').replace(/\t/g,'').replace(/\r/g,'')
                    let formData = Object.assign(this.model, values);
                    request({url: '/SysDrEmpRuleController/save',method: 'post',data: formData}).then((res)=>{
                        if(res.success){
                            that.$message.success(res.message);
                        }else{
                            that.$message.warning(res.message);
                        }
                    }).finally(() => {
                        that.confirmLoading = false;
                        that.close()
                    })
                    
                }
            }) 
        },
        cancel(){
           this.visible = false
            
        },
        close () {
            this.$emit('close');
            this.visible = false;
        },
        changeEventHandler(changeItem){
            
            this.$emit('handlerChange',changeItem);
        },
        clickEventHandler(field,form){
            if(field=="empName"){
                this.$refs["drEmpSelect"].edit({});
            }
            
            this.$emit('handlerClick',field,form);
        },
        onSelect(record){
            this.model["empName"] = record.empName
            this.model["accountNo"] = record.accountNo
            this.getForm().setFieldsValue({"empName":this.model["empName"]})
            this.getForm().setFieldsValue({"accountNo":this.model["accountNo"]})
        },
        getForm(){
            return this.$refs.LForm.form
        },
    }
}
</script>
